<template>
  <el-col>
    <el-dialog title="增加" :visible.sync="addDialogVisible" :before-close="handleCloseAddDialog">
      <el-form ref="menuInfo" :model="menuInfo" :rules="menuRules" label-width="100px">
        <el-form-item label="名字" prop="name">
          <el-input v-model="menuInfo.name" />
        </el-form-item>
        <el-form-item label="页面标题" prop="title">
          <el-input v-model="menuInfo.title" />
        </el-form-item>
        <el-form-item label="页面路径" prop="path">
          <el-input v-model="menuInfo.path" />
        </el-form-item>
        <el-form-item label="页面图标" prop="icon">
          <el-input v-model="menuInfo.icon" />
        </el-form-item>
        <el-form-item label="组件名" prop="component">
          <el-input v-model="menuInfo.component" />
        </el-form-item>
        <el-form-item label="是否开启" prop="isOpen">
          <el-switch v-model="menuInfo.isOpen" :active-value="0" :inactive-value="1">
          </el-switch>
        </el-form-item>
        <el-form-item label="父组件菜单" prop="parentId">
          <el-select v-model="menuInfo.parentId" placeholder="请输入关键词" filterable remote :remote-method="loadMenuId">
            <el-option v-for="menu in menuIdList" :key="menu.menuId" :value="menu.menuId" :label="menu.name">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseAddDialog">取 消</el-button>
        <el-button type="primary" @click="handleConfirmAddDialog">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="更新" :visible.sync="updateDialogVisible" :before-close="handleCloseUpdateDialog">
      <el-form ref="menuInfo" :model="menuInfo" :rules="menuRules" label-width="100px">
        <el-form-item label="名字" prop="name">
          <el-input v-model="menuInfo.name" />
        </el-form-item>
        <el-form-item label="页面标题" prop="title">
          <el-input v-model="menuInfo.title" />
        </el-form-item>
        <el-form-item label="页面路径" prop="path">
          <el-input v-model="menuInfo.path" />
        </el-form-item>
        <el-form-item label="页面图标" prop="icon">
          <el-input v-model="menuInfo.icon" />
        </el-form-item>
        <el-form-item label="组件名" prop="component">
          <el-input v-model="menuInfo.component" />
        </el-form-item>
        <el-form-item label="是否开启" prop="isOpen">
          <el-switch v-model="menuInfo.isOpen" :active-value="0" :inactive-value="1">
          </el-switch>
        </el-form-item>
        <el-form-item label="父组件菜单" prop="parentId">
          <el-select v-model="menuInfo.parentId" placeholder="请输入关键词" filterable remote :remote-method="loadMenuId">
            <el-option v-for="menu in menuIdList" :key="menu.menuId" :value="menu.menuId" :label="menu.name">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseUpdateDialog">取 消</el-button>
        <el-button type="primary" @click="handleConfirmUpdateDialog">确 定</el-button>
      </span>
    </el-dialog>

    <el-row>
      <el-col :span="2">
        <el-button type="primary" @click="addDialogVisible = true">增加</el-button>
      </el-col>

      <el-col :span="2">
        <el-button :disabled="multipleSelection.length > 1" type="warning"
          @click="showUpdateDialogVisible">更新</el-button>
      </el-col>

      <el-col :span="2">
        <el-button type="danger" @click="handleDeleteSelectIds">删除</el-button>
      </el-col>
    </el-row>

    <el-table ref="multipleTable" :data="menuList" style="width: 100%" row-key="menuId" lazy :load="loadChildren"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="menuId" label="菜单 ID"> </el-table-column>
      <el-table-column prop="name" label="名字"> </el-table-column>
      <el-table-column prop="title" label="页面标题"> </el-table-column>
      <el-table-column prop="path" label="页面路径"> </el-table-column>
      <el-table-column prop="icon" label="页面图标名"> </el-table-column>
      <el-table-column prop="component" label="组件名"> </el-table-column>
      <el-table-column label="是否开启">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isOpen" :active-value="0" :inactive-value="1" disabled>
          </el-switch>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination background layout="prev, pager, next" :total="total" prev-click="" next-click="">
    </el-pagination>
  </el-col>
</template>

<script>
export default {
  name: "m-menu",
  data() {
    return {
      addDialogVisible: false,
      updateDialogVisible: false,

      menuRules: {
        name: [{ required: true, trigger: "blur" }],
        title: [{ required: true, trigger: "blur" }],
        path: [{ required: true, trigger: "blur" }],
        component: [{ required: true, trigger: "blur" }],
        isOpen: [{ required: true, trigger: "blur" }],
      },

      menuInfo: {
        name: "",
        title: "",
        path: "",
        icon: "",
        component: "",
        parentId: "",
        isOpen: 0,
      },

      menuList: [],
      page: 0,
      pageSize: 10,
      total: 0,

      query: "",
      menuIdList: [],
      menuIdPage: 0,
      menuIdPageSize: 10,

      multipleSelection: [],
    };
  },
  methods: {
    loadChildren(tree, treeNode, resolve) {
      // 子标题 字节从 0 加载到 100 加载完
      this.$store
        .dispatch("menu/selectAllMenu", {
          obj: {
            menuId: tree.menuId,
          },
          page: 0,
          pageSize: 100,
        })
        .then((res) => {
          resolve(res.list);
        });
    },
    loadMenuId(query) {
      this.$store
        .dispatch("menu/selectAllMenuId", {
          obj: {
            title: query,
          },
          page: this.menuIdPage,
          pageSize: this.menuIdPageSize,
        })
        .then((res) => {
          this.menuIdList = res;
        });
    },

    showUpdateDialogVisible() {
      if (this.multipleSelection.length == 0) {
        this.$message.error("请选择");
        return;
      }
      this.menuInfo = this.multipleSelection[0];
      this.updateDialogVisible = true;
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    handleCloseAddDialog() {
      this.addDialogVisible = false;
      this.refresh();
    },
    handleConfirmAddDialog() {
      this.$refs.menuInfo.validate((valid) => {
        if (valid) {
          this.addDialogVisible = false;
          this.$store.dispatch("menu/addMenu", this.menuInfo).then(() => { });
          this.doSelectAllMenu();
          location.reload();
        }
      });
      this.refresh();
    },

    handleCloseUpdateDialog() {
      this.updateDialogVisible = false;
      this.refresh();
    },
    handleConfirmUpdateDialog() {
      this.$refs.menuInfo.validate((valid) => {
        if (valid) {
          this.updateDialogVisible = false;
          this.$store.dispatch("menu/updateMenu", this.menuInfo).then(() => { });
          this.doSelectAllMenu();
          location.reload();
        }
      });
      this.refresh();
    },

    handleDeleteSelectIds() {
      let ids = [];
      for (let obj of this.multipleSelection) {
        ids.push(obj.menuId);
      }
      this.$store.dispatch("menu/deleteMenu", ids).then(() => { });
      location.reload();
    },

    refresh() {
      this.menuInfo = {
        name: "",
        title: "",
        path: "",
        icon: "",
        component: "",
        parentId: "",
        isOpen: 0,
      };
      this.$refs.multipleTable.clearSelection();
    },

    prevClick() {
      this.page -= 1;
      this.doSelectAllMenu();
    },
    nextClick() {
      this.page += 1;
      this.doSelectAllMenu();
    },

    doSelectAllMenu() {
      this.$store
        .dispatch("menu/selectAllMenu", {
          obj: {
            menuId: 0,
          },
          page: this.page,
          pageSize: this.pageSize,
        })
        .then((res) => {
          this.menuList = res.list;
          this.total = res.total;
        });
    },
  },
  created() {
    this.doSelectAllMenu();
  },
};
</script>

<style scoped>

</style>